import React, { useState } from 'react'
import {
    Modal, Form,
    Input,
    Switch, Button, message
} from 'antd';
import AliyunOSSUpload from '../Upload';
import   { post }  from '../../util/post'
import { useLocation } from 'react-router-dom';
export default function AddGoodsModal(props) {
    const [imgData, setImgData] = useState('')
    const { visible, setVisible } = props;
    const token = localStorage.getItem('TOKEN')
    const location =useLocation()
    const handleOk = () => {
        setVisible(false);
    };
    const changeImgList = (a) => {
        if(a.length!==0){
            const s = 'https://onlineorder.oss-cn-shenzhen.aliyuncs.com/' + a[0].url
            setImgData(s);
        }
        else setImgData('')
    }
    const handleCancel = () => {
        setVisible(false);
    };
    const onFinish = async (data) => {
        data.defaultImg =imgData
        data.status =data.status===undefined?0:1;
        data.shopId=location.pathname.split('/')[2]
        // console.log('onfinish',data)
        const res = await post('/product/product/save',data,token)
        // console.log(res)
        if(res.data.code===0){
            message.success('成功')
            setVisible(false)
        }
        else{
            message.error(res.data.msg)
        }
    }
    return (
        <div>
            <Modal 
            title="新增商品" 
            visible={visible} 
            onOk={handleOk} 
            onCancel={handleCancel}
            footer={null}
            >
                <Form
                    labelCol={{ span: 4, }}
                    wrapperCol={{ span: 14, }}
                    layout="horizontal"
                    onFinish={onFinish}
                >
                    <Form.Item
                        name="name"
                        label="商品名称"
                        rules={[
                            {
                                required: true,
                                message: '请输入商品名称',
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        name="price"
                        label="价格"
                        rules={[
                            {
                                required: true,
                                message: '请输入商品价格',
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        name="description"
                        label="描述"
                        rules={[
                            {
                                required: true,
                                message: '请对商品进行描述',
                            },
                        ]}
                    >
                        <Input
                            style={{
                                width: '100%',
                            }}
                        />
                    </Form.Item>
                    <Form.Item label={"图片"} name={'defaultImg'}>
                        <AliyunOSSUpload value={imgData} changeImgList={(data) => changeImgList(data)} />
                    </Form.Item>
                    <Form.Item label="销售状态" name={'status'} valuePropName="checked">
                        <Switch />
                    </Form.Item>
                    <Form.Item
                        wrapperCol={{
                            offset: 8,
                            span: 16,
                        }}
                    >
                        <Button type="primary" htmlType="submit">
                            提交申请
                        </Button>
                    </Form.Item>
                </Form>
            </Modal>
        </div>
    )
}
